<template>
  <u-popup :show="show" mode="center" @close="close">
    <view class="box">
      <view class="box_title">
        {{ title }}
      </view>
      <view
        class="box_item"
        v-for="(item, index) in list"
        @click="checkChange(item, index)"
      >
        <view class="item_left">
          {{ item.name || item.level_name}}
        </view>
        <view class="item_right" v-show="currentValue == index">
          <image
            src="@/static/images/icon_cjwc_quanxianxuanze.png"
            mode=""
          ></image>
        </view>
      </view>
      <view class="box_btn">
        <view class="btn_colse" @click="close"> 取消 </view>
        <view class="btn_confirm" @click="confirm"> 确定 </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
import { methods } from "../uni_modules/uview-ui/libs/mixin/mixin";
export default {
  data() {
    return {
      currentValue: -1,
    };
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    show: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "",
    },
    defaultValue: {
      type: Boolean,
      default: false,
    },
    defaultIndex: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    defaultIndex: {
      deep: true, // 深度监听每一个属性值, 如果是对象可以深度监听
      immediate: true, // 进入页面后立即自动调用handler函数
      handler(newValue) {
        if (newValue>-1) {
          this.currentValue = newValue;
        }
        // console.log(newValue,'触发了吗')
        // console.log(this.currentValue,'触发了吗')
      },
    },
  },
  methods: {
    close() {
      this.$emit("colse", false);
    },
    confirm() {
      this.$emit("confirm", this.list[this.currentValue]);
    },
    checkChange(e, index) {
      // if (index == this.currentValue) {
      //   this.currentValue = -1;
      // } else {
        this.currentValue = index;
      // }
      console.log("eeeee", e);
      this.$emit("confirm", this.list[this.currentValue]);
    },
  },
};
</script>

<style scoped lang="scss">
.box {
  width: 640rpx;
  background: #fff;
  border-radius: 16rpx;
}
.box_title {
  width: 100%;
  padding: 32rpx 0;
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  font-size: 32rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #272727;
}
.box_item {
  width: 640rpx;
  padding: 32rpx 40rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #e5e5e5;
  display: flex;
  justify-content: space-between;

  .item_right {
    width: 34rpx;
    height: 24rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.box_btn {
  width: 100%;
  height: 112rpx;
  display: flex;
  .btn_colse {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #272727;
  }
  .btn_confirm {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #55b877;
  }
}
</style>